<template>
  <header
    :class="`
      w-full
      h-14
      px-6
      top-0
      flex
      items-center
      justify-between
      z-20
      font-sans
      md:sticky
      shadow-md ${fontAndBg}`
    "
  >
    <div
      class="logo cursor-pointer filter hover:brightness-75 invert dark:invert-0" @click="goHome"
    >
      <img class="w-28 h-5" src="~/assets/images/logo.png" alt="">
    </div>
    <div class="flex items-center">
      <div class="group nav-control flex items-center">
        <div :class="`${liClass} hidden`">分类</div>
        <div :class="`${liClass} hidden`">更多</div>
        <!-- 菜单 -->
        <a-svg name="menu" :class="iconClass + ' menu-icon'" @click="openDrawer" />
      </div>
      <!-- 搜索 -->
      <a-svg name="search" :class="iconClass" @click="openSearch" />
      <!-- 登录 -->
      <ASvg name="user" :class="iconClass" />
    </div>
    <!-- 抽屉 -->
    <div v-show="showDrawer" class="select-none	perspective bg-transparent fixed inset-0 z-20 w-screen h-screen" @click.stop="showDrawer = false">
      <div :class="`animate-scale absolute right-0 top-0 w-1/2 h-screen shadow-xl ${fontAndBg}`"  @click.stop="">
        <div :class="`${liClass} ${liYClass}`">登录</div>
        <div :class="`${liClass} ${liYClass}`" @click="openSearch">搜索</div>
        <div :class="`${liClass} ${liYClass}`">分类</div>
        <div :class="`${liClass} ${liYClass} relative`" @click="showMore = !showMore">更多 <a-svg name="arrowRight" :class="`${showMore ? 'rotate-90' : ''} h-4 w-4 absolute right-5 top-3.5`" /> </div>
        <!-- 展开更多 -->

      </div>
    </div>
    <!-- 搜索页 -->
    <div v-show="searchShow" :class="`animate-tilt fixed top-14 left-0 w-full h-screen flex justify-center z-10 ${fontAndBg}`" @click="searchShow=false">
      <div class="mt-32 w-10/12 h-max relative md:w-1/2 z-10" @click.stop="">
        <input v-model="searchVal" class="border border-gray-200 shadow-2xl z-2 rounded-full w-full h-14 px-5 py-3 text-lg tracking-wider focus:outline-none focus:ring-2 dark:focus:ring-purple-600 focus:border-gray-200 text-neutral-700" type="text" placeholder="输入你想搜索的..." @keyup.enter="goSearch" />
        <a-svg name="searchLine" :class="`absolute right-3 top-3 w-8 h-8 duration-300 text-gray-400 cursor-pointer hover:text-gray-500`" @click="goSearch" />
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: "AHeader",
  data() {
    return {
      showDrawer: false,
      searchShow: false,
      showMore: false,
      searchVal: '',
      fontAndBg: ' bg-white text-slate-800 dark:bg-gray-600 dark:text-white',
      liClass:
        "li md:group-hover:flex mx-4 cursor-pointer text-center hover:text-zinc-500 dark:hover:text-zinc-300",
      liYClass: 'py-2 my-5 hover:bg-gray-100 text-lg dark:hover:bg-slate-800',
      iconClass:
        "h-6 w-6 md:mx-3 cursor-pointer filter transition-all hover:brightness-75 hidden md:inline-block",
    };
  },
  methods:{
    openSearch(){
      this.searchShow = true
      this.showDrawer = false
    },
    openDrawer(){
      if(process.client && typeof window !== 'undefined' && document.body.offsetWidth + 6 < 860){
        this.showDrawer = !this.showDrawer
      }
    },
    goHome(){
      this.showDrawer = false
      this.searchShow = false
    },
    goSearch(){
      console.log(this.searchVal);
    }
  }
};
</script>